<template>
  <div class="tablePageWarp">
    <div class="commonSelectWidth table-page-search-wrapper">
      <a-form layout="vertical">
        <a-row :gutter="[16,0]">
          <a-col :md="4" :sm="24">
            <a-form-model-item :label="$t('品牌')">
              <CompanySelect v-model="queryParam.company" @change="refreshData(true)"/>
            </a-form-model-item>
          </a-col>
          <a-col :md="4" :sm="24">
            <a-form-model-item :label="$t('车型')">
              <CarModelSelect v-model="queryParam.id" :hasAll="false" clear @change="refreshData(true)"/>
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="24" style="margin-top: 29px;">
            <div class="searchBtns">
              <a-button-group>
                <auth-button type="primary" :auth="$managePerms.adasEcuConfig.view" @click="refreshData(true)">
                  <i class="iconfont icon-chazhao"></i>
                  {{ $t('inquiry') }}
                </auth-button>
                <a-button @click="clear">
                  <i class="iconfont icon-qingkong"></i>
                  {{ $t('clear') }}
                </a-button>
              </a-button-group>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <s-table
      ref="table"
      class="h100"
      size="default"
      rowKey="id"
      :columns="cols"
      :data="loadData"
      :addLoading="true"
      :getPopupContainer="$commonFun.getPopupContainer"
    >
      <template #idriveUrlLimit="text,record">
        <a-switch :checked="text === 1" @change="(e) => switchModel(e, record)" :loading="record.loading"
          :disabled="!$hasPermission($managePerms.adasEcuConfig.operate)"/>
      </template>
      <template #action="text,record">
        <span class="tableOperateSty" style="display: flex;">
          <auth-button :ghost="true" :disabled="record.idriveUrlLimit === 0" size="small" @click="showEcu(record)">
            ECU配置
          </auth-button>
          <auth-button :ghost="true" :disabled="record.idriveUrlLimit === 0" size="small" @click="showVehicle(record)">
            车辆配置
          </auth-button>
        </span>
      </template>
    </s-table>
  </div>
</template>

<script>
  import CompanySelect from '@/views/components/companySelect'
  import CarModelSelect from '@/views/components/CarModelSelect'
  import EcuSelect from '@/views/components/PartSelect'
  import {adasEcuConfigCols} from './cols'
  import api from '@/api/modules/system/adasEcuConfig'
  import EcuConfig from './ecuConfig'
  import VehicleConfig from './vehicleConfigTabs'
  import {minxinDrawerUse} from "@/utils/mixin";

  export default {
    name: 'adasEcuConfig',
    components: {CompanySelect, CarModelSelect, EcuSelect},
    mixins: [minxinDrawerUse],
    data() {
      return {
        queryParam: {
          company: undefined,
          id: undefined,
          ecuId: undefined,
        },
        cols: adasEcuConfigCols,
      }
    },
    methods: {
      loadData(page) {
        return api.list({...this.queryParam, ...page});
      },
      clear() {
        this.queryParam = {};
        this.refreshData(true);
      },
      refreshData(isToFirstPage = false) {
        const vm = this
        vm.$nextTick(() => {
          this.$refs.table.refresh(isToFirstPage)
        })
      },
      switchModel(e, record) {
        let vm = this;
        let enabled = e;
        // let enabled = e.target.checked;
        this.$confirm({
          title: vm.$t('车型配置'),
          content: enabled ? '您确定要开启吗？开启后，配置的车辆和ECU将会在下载升级文件前校验下载地址的域名'
            : '您确定要关闭校验吗？关闭后，该车型下的所有车辆在下载升级文件前不再校验下载地址的域名',
          onOk() {
            record.loading = true;
            let method = enabled ? api.enableModel : api.disableModel;
            method({id: record.id}).then(() => {
              vm.refreshData(false);
            }).finally(() => record.loading = false);
          },
          onCancel() {
          }
        })
      },
      showEcu(record) {
        const buttons = this.getRightDrawerFooterButtons()
        this.showRightDrawer(EcuConfig, this.$t('ECU配置'), null, 'large', {modelId: record.id,
          updateCallback: () => {
            this.refreshData(false);
          }});
      },
      showVehicle(record) {
        const buttons = this.getRightDrawerFooterButtons()
        this.showRightDrawer(VehicleConfig, this.$t('车辆配置'), null, 'huge', {modelId: record.id,
          updateCallback: () => {
            this.refreshData(false);
          }});
      }
    },

  }
</script>